<template>
<div class="section-page renovationhome-page" v-loading="loading">
    <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
    <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="uploadFileChange"></choose-goods>
    <choose-categories ref="chooseCategories" :config="chooseCategoriesConfig" :changeEvt="uploadFileChange"></choose-categories>
    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>
    <div class="page-content">
        <div class="page-body pad-no">
            <section class="page-box">
                <div class="welcome-container">
                    <div class="renovation-content">
                        <el-row class="tac renohome-left" v-show="!loading">
                            <el-col>
                                <el-menu default-active="1" :default-openeds="openeds" class="el-menu-vertical-demo">
                                    <el-submenu index="1">
                                        <i slot="title">
                                        <span>组件（请使用鼠标或方向键调整位置）</span>
                                        </i>
                                        <el-menu-item-group>
                                            <el-menu-item v-for="(item, index) in redata1" :key="item.key" v-if="item.plugin&&item.plugin.includes(isPlugin)" @click="leftclick(index,1,item.key)" :index="`1-${index}`">
                                                <div class="flex-col flex-justify-c flex-align-c">
                                                    <svg-icon :icon-class="item.icon" />
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                </div>
                                            </el-menu-item>
                                        </el-menu-item-group>
                                    </el-submenu>
                                </el-menu>
                            </el-col>
                        </el-row>
                        <div class="flex-row flex-justify-c">
                            <section ref="renohome" class="renohome-content" v-loading="loading">
                                <div class="renohome-phone">
                                    <div class="renohome-phone-inner">
                                        <!-- draggable: disabled default false-->
                                        <vue-draggable-resizable
                                            :x="showitem.style.pos_x"
                                            :handles="Array.isArray(showitem.params.handles) ? showitem.params.handles : handlesList"
                                            :y="showitem.style.pos_y"
                                            :w="showitem.style.width"
                                            :lockAspectRatio="showitem.params.scale === '1'"
                                            :resizable="showitem.params.resizable"
                                            :draggable="!showitem.params.disabled"
                                            :h="showitem.style.height"
                                            :z="showitem.style.z_index"
                                            v-for="(showitem, showindex) in custormList"
                                            :key="showitem.id"
                                            :parent="true"
                                            @dragstop="draggableStop(...arguments,showitem)"
                                            @resizestop="draggableStop(...arguments,showitem)">
                                            <text-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'text'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></text-show>
                                            <bgimg-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'bgimg'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></bgimg-show>
                                            <image-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'image'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></image-show>
                                            <qrcode-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'qrcode'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></qrcode-show>
                                            <avatar-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'avatar'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></avatar-show>
                                            <nickname-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'nickname'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></nickname-show>
                                            <goodsname-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'goodsname'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></goodsname-show>
                                            <goodsimg-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'goodsimg'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></goodsimg-show>
                                            <goodsoldprice-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'goodsoldprice'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></goodsoldprice-show>
                                            <goodsnowprice-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'goodsnowprice'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></goodsnowprice-show>
                                            <shoplogo-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'shoplogo'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></shoplogo-show>
                                            <shopname-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'shopname'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></shopname-show>

                                            <groupinfo-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'groupinfo'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></groupinfo-show>
                                            <groupprice-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'groupprice'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></groupprice-show>
                                            <grouptime-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'grouptime'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></grouptime-show>
                                            <spikeinfo-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'spikeinfo'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></spikeinfo-show>
                                            <spikeprice-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'spikeprice'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></spikeprice-show>
                                            <spiketime-show  ref="showitem" :id="showitem.id" v-if="showitem.key == 'spiketime'" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"></spiketime-show>
                                        </vue-draggable-resizable>
                                    </div>
                                </div>
                                <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
                                  <el-button size="small" @click="$router.push({path:'/application/custormPosterListAdd',query:{type:$route.query.type}})" type="primary">上一步</el-button>
                                  <el-button size="small" @click="formSaveSubmit">保存</el-button>
                                </div>
                            </section>
                        </div>
                        <div class="renohome-right">
                            <div v-for="(item, index) in custormList" :data-key="index" :key="index">
                                <text-edit ref="text_edit" v-if="item.key == 'text' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></text-edit>
                                <bgimg-edit ref="bgimg_edit" v-if="item.key == 'bgimg' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></bgimg-edit>
                                <image-edit ref="image_edit" v-if="item.key == 'image' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></image-edit>
                                <qrcode-edit ref="qrcode_edit" v-if="item.key == 'qrcode' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></qrcode-edit>
                                <avatar-edit ref="avatar_edit" v-if="item.key == 'avatar' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></avatar-edit>
                                <nickname-edit ref="nickname_edit" v-if="item.key == 'nickname' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></nickname-edit>
                                <goodsname-edit ref="goodsname_edit" v-if="item.key == 'goodsname' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></goodsname-edit>
                                <goodsimg-edit ref="goodsimg_edit" v-if="item.key == 'goodsimg' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></goodsimg-edit>
                                <goodsoldprice-edit ref="goodsoldprice_edit" v-if="item.key == 'goodsoldprice' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></goodsoldprice-edit>
                                <goodsnowprice-edit ref="goodsnowprice_edit" v-if="item.key == 'goodsnowprice' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></goodsnowprice-edit>
                                <shoplogo-edit ref="shoplogo_edit" v-if="item.key == 'shoplogo' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></shoplogo-edit>
                                <shopname-edit ref="shopname_edit" v-if="item.key == 'shopname' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></shopname-edit>

                                <groupinfo-edit ref="groupinfo_edit" v-if="item.key == 'groupinfo' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></groupinfo-edit>
                                <groupprice-edit ref="groupprice_edit" v-if="item.key == 'groupprice' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></groupprice-edit>
                                <grouptime-edit ref="grouptime_edit" v-if="item.key == 'grouptime' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></grouptime-edit>
                                <spikeinfo-edit ref="spikeinfo_edit" v-if="item.key == 'spikeinfo' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></spikeinfo-edit>
                                <spikeprice-edit ref="spikeprice_edit" v-if="item.key == 'spikeprice' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></spikeprice-edit>
                                <spiketime-edit ref="spiketime_edit" v-if="item.key == 'spiketime' && custormCurrent == index" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"></spiketime-edit>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
    </div>
</div>
</template>

<script>
// import VueDraggableResizable from 'vue-draggable-resizable'
import custormData from '@/components/CustormPoster/utils/custormInitData'
import ChooseFiles from '@/components/ChooseFiles/index'
import ChooseGoods from '@/components/ChooseGoods/index'
import ChooseCategories from '@/components/ChooseCategories/index'
import ChooseLink from '@/components/ChooseLink/index'
import textShow from '@/components/CustormPoster/text_show'
import textEdit from '@/components/CustormPoster/text_edit'
import bgimgShow from '@/components/CustormPoster/bgimg_show'
import bgimgEdit from '@/components/CustormPoster/bgimg_edit'
import imageShow from '@/components/CustormPoster/image_show'
import imageEdit from '@/components/CustormPoster/image_edit'
import qrcodeShow from '@/components/CustormPoster/qrcode_show'
import qrcodeEdit from '@/components/CustormPoster/qrcode_edit'
import avatarShow from '@/components/CustormPoster/avatar_show'
import avatarEdit from '@/components/CustormPoster/avatar_edit'
import nicknameShow from '@/components/CustormPoster/nickname_show'
import nicknameEdit from '@/components/CustormPoster/nickname_edit'
import goodsnameShow from '@/components/CustormPoster/goodsname_show'
import goodsnameEdit from '@/components/CustormPoster/goodsname_edit'
import goodsimgShow from '@/components/CustormPoster/goodsimg_show'
import goodsimgEdit from '@/components/CustormPoster/goodsimg_edit'
import goodsoldpriceShow from '@/components/CustormPoster/goodsoldprice_show'
import goodsoldpriceEdit from '@/components/CustormPoster/goodsoldprice_edit'
import goodsnowpriceShow from '@/components/CustormPoster/goodsnowprice_show'
import goodsnowpriceEdit from '@/components/CustormPoster/goodsnowprice_edit'
import shoplogoShow from '@/components/CustormPoster/shoplogo_show'
import shoplogoEdit from '@/components/CustormPoster/shoplogo_edit'
import shopnameShow from '@/components/CustormPoster/shopname_show'
import shopnameEdit from '@/components/CustormPoster/shopname_edit'

import groupinfoShow from '@/components/CustormPoster/groupinfo_show'
import groupinfoEdit from '@/components/CustormPoster/groupinfo_edit'
import grouppriceShow from '@/components/CustormPoster/groupprice_show'
import grouppriceEdit from '@/components/CustormPoster/groupprice_edit'
import grouptimeShow from '@/components/CustormPoster/grouptime_show'
import grouptimeEdit from '@/components/CustormPoster/grouptime_edit'

import spikeinfoShow from '@/components/CustormPoster/spikeinfo_show'
import spikeinfoEdit from '@/components/CustormPoster/spikeinfo_edit'
import spikepriceShow from '@/components/CustormPoster/spikeprice_show'
import spikepriceEdit from '@/components/CustormPoster/spikeprice_edit'
import spiketimeShow from '@/components/CustormPoster/spiketime_show'
import spiketimeEdit from '@/components/CustormPoster/spiketime_edit'
import {
  signid
} from '@/utils/index'
// import domscroll from '@/directive/domscroll'
import { addPoster } from '@/api/application'
import power from '@/mixins/power'
export default {
  name: 'Mgroup',
  mixins: [power],
  watch: {
  },
  data() {
    return {
      handlesList: ['br'],
      contentW: 375,
      contentH: 600,
      filterZindex: ['bgimg'],
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        initList: []
      },
      chooseCategoriesConfig: {
        type: ['chooseCategories'],
        initList: [],
        choose_type: 'goods'
      },
      chooseLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1',
        disabled: [{
          label: 'groups_price',
          value: 0
        }, {
          label: 'groups_stock',
          value: 0
        }]
      },
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image'
      },
      $editKey: -1,
      loading: false,
      noFiltersLits: [-2],
      openeds: ['1', '2', '3', '4'],
      custormInitData: custormData.data,
      iscustormDataCopy: false,
      hasCustormCopyMap: [],
      custormList: [], // 渲染自定义组件的数据
      custormCurrent: -1,
      draggingCurrent: -1,
      redata1: [
        {
          icon: 'poster_bg',
          name: '背景图',
          key: 'bgimg',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_img',
          name: '图片',
          key: 'image',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_qrcode',
          name: '二维码',
          key: 'qrcode',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_header',
          name: '头像',
          key: 'avatar',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_nick',
          name: '昵称',
          key: 'nickname',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_goods',
          name: '商品名称',
          key: 'goodsname',
          plugin: ['goods', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_goodsimg',
          name: '商品图片',
          key: 'goodsimg',
          plugin: ['goods', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_oldprice',
          name: '商品原价',
          key: 'goodsoldprice',
          plugin: ['goods', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_nowprice',
          name: '商品现价',
          key: 'goodsnowprice',
          plugin: ['goods', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_shoplogo',
          name: '店铺LOGO',
          key: 'shoplogo',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_title',
          name: '店铺名称',
          key: 'shopname',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_text',
          name: '文本',
          key: 'text',
          plugin: ['goods', 'distribution', 'spike', 'group'],
          nownum: 0
        },
        {
          icon: 'poster_title',
          name: '拼团信息',
          key: 'groupinfo',
          plugin: ['group'],
          nownum: 0
        },
        {
          icon: 'poster_nowprice',
          name: '拼团价格',
          key: 'groupprice',
          plugin: ['group'],
          nownum: 0
        },
        {
          icon: 'poster_time',
          name: '拼团时间',
          key: 'grouptime',
          plugin: ['group'],
          nownum: 0
        },
        {
          icon: 'poster_title',
          name: '秒杀信息',
          key: 'spikeinfo',
          plugin: ['spike'],
          nownum: 0
        },
        {
          icon: 'poster_nowprice',
          name: '秒杀价格',
          key: 'spikeprice',
          plugin: ['spike'],
          nownum: 0
        },
        {
          icon: 'poster_time',
          name: '秒杀时间',
          key: 'spiketime',
          plugin: ['spike'],
          nownum: 0
        }
      ],
      redata2: [
      ],
      redata3: [
      ],
      redata4: []
    }
  },
  directives: {

  },
  computed: {
    isChannel() {
      return this.$route.query.channel ? JSON.parse(this.$route.query.channel) : []
    },
    posterName() {
      return this.$route.query.poster || ''
    },
    isPlugin() {
      return ['goods', 'distribution', 'spike', 'group'].includes(this.$route.query.type) ? this.$route.query.type : ''
    },
    hasCustormCopy() {
      const currentKey = this.custormList[this.custormCurrent]['key']
      return !this.hasCustormCopyMap.includes(currentKey)
    },
    $edit() {
      return !!this.$route.query.diy_page_id
    }
  },
  components: {
    // VueDraggableResizable,
    ChooseFiles,
    ChooseGoods,
    ChooseCategories,
    ChooseLink,
    textShow,
    textEdit,
    bgimgShow,
    bgimgEdit,
    imageShow,
    imageEdit,
    qrcodeShow,
    qrcodeEdit,
    avatarShow,
    avatarEdit,
    nicknameShow,
    nicknameEdit,
    goodsnameShow,
    goodsnameEdit,
    goodsimgShow,
    goodsimgEdit,
    goodsoldpriceShow,
    goodsoldpriceEdit,
    goodsnowpriceShow,
    goodsnowpriceEdit,
    shoplogoShow,
    shoplogoEdit,
    shopnameShow,
    shopnameEdit,
    groupinfoShow,
    groupinfoEdit,
    grouppriceShow,
    grouppriceEdit,
    grouptimeShow,
    grouptimeEdit,
    spikeinfoShow,
    spikeinfoEdit,
    spikepriceShow,
    spikepriceEdit,
    spiketimeShow,
    spiketimeEdit
  },
  destroyed() {

  },
  beforeDestroy() {
    this.$refs.renohome.removeEventListener('scroll', this.handleScroll, false)
    document.removeEventListener('keydown', this.draggableMove, false)
    clearInterval(this.$refs.renohome.timer)
  },
  created() {
    // 手动获取编辑数据
    this.$nextTick(() => {
      if (this.$edit) {
        // this.custormList = custormList
      }
      this.$refs.renohome.addEventListener('scroll', this.handleScroll, false)
      document.addEventListener('keydown', this.draggableMove, false)
    })
  },
  mounted() {
    console.log(signid('MC'))
  },
  methods: {
    handleScroll() {
      console.log('handleScroll')
      this.$refs.renohome.timer && clearInterval(this.$refs.renohome.timer)
    },
    formSaveSubmit() {
      if (this.custormList.length > 0) {
        const params = { custormList: this.custormList, channel: this.isChannel, plugin: this.isPlugin, posterName: this.posterName }
        addPoster(params).then(res => {
          console.log(res)
        })
      } else {
        this.$message.error('请添加组件~！')
      }
    },
    uploadFileToggle(type, params) {
      if (type === 'chooseGoods') {
        this.$refs.chooseGoods.toggle()
      } else if (Array.isArray(type) && type.includes('coupon') || type.includes('goods')) {
        this.$refs.chooseCategories.toggle()
      } else if (type === 'image' || type === 'video' || type === 'audio') {
        this.$refs.chooseFiles.toggle()
      } else if (type === 'link') {
        const { link_type } = params
        if (['spike', 'group', 'lottery'].includes(link_type)) {
          this.chooseLinkConfig.link_type = link_type
        } else {
          this.chooseLinkConfig.link_type = '1'
        }
        this.$refs.chooseLink.toggle()
      }
    },
    uploadFileChange(files) {
      const $editKey = this.$editKey
      const [$refs] = this.$refs[`${$editKey}_edit`]
      console.log($refs)
      if ($editKey !== -1 && $refs && Object.prototype.toString.call($refs.uploadFileCallBack) === '[object Function]') {
        console.log(files)
        $refs.uploadFileCallBack(files)
      }
    },
    custormEditEvt({ type, params }) {
      console.log('custormEditEvt', type)
      if (type) {
        if (['image', 'video', 'audio'].includes(type)) {
          this.chooseFilesConfig.file_type = type
        } else if (Array.isArray(type) && type.includes('coupon') || type.includes('goods')) {
          this.chooseCategoriesConfig.choose_type = type
          console.log(this.chooseCategoriesConfig.choose_type)
        }
        this.uploadFileToggle(type, params)
        this.$editKey = params.editKey
      }
    },
    checkCopy() {
      let redataItem = {}
      if (this.custormCurrent !== -1) {
        const key = this.custormList[this.custormCurrent]['key']
        let allnum = -1
        let nownum = -1
        const redataArray = [...this.redata1, ...this.redata2, ...this.redata3, ...this.redata4]
        redataArray.some(item => {
          const isredata = item.key === key
          if (isredata) {
            allnum = item.allnum
            nownum = item.nownum
            redataItem = item
            return isredata
          }
        })
        this.iscustormDataCopy = (allnum > nownum || !allnum)
        return redataItem
      } else {
        this.iscustormDataCopy = false
      }
      return redataItem
    },
    leftclick(index, e, key) {
      console.log(index, e, this[`redata${e}`][index])
      // const num = this[`redata${e}`][index].nownum
      const allnum = this[`redata${e}`][index].allnum
      const num = this.custormList.filter(custormItem => {
        const { key: keyNow } = custormItem
        return keyNow === key
      })
      if (allnum > num.length || !allnum) {
        if (this.custormCurrent === -2) {
          this.custormCurrent = -1
        }
        const spliceIndex = this.custormCurrent + 1
        this.custormList.splice(spliceIndex, 0, Object.assign({}, this.filterCustorm(key)))
        this.custormList[spliceIndex]['style']['z_index'] = this.filterZindex.includes(key) ? 0 : this.custormList.length
        this.$nextTick(() => {
          this.custormCurrent = spliceIndex
          this.checkCopy()
        })
      } else {
        this.$message({
          type: 'error',
          message: `此类型组件最多添加${allnum}个~!`
        })
      }
    },
    findCustormIndex(id) {
      if (!!id && id.length === 13 && (typeof id === 'string')) {
        const index = this.custormList.findIndex((item) => {
          return item.id === id
        })
        return index
      }
      return -1
    },
    checkCustorm(_key) {
      const index = this.custormList.findIndex((item, index) => {
        return item.key === _key
      })
      return index
    },
    draggableMove(event) {
      console.log('draggableMove')
      const { keyCode } = event
      if (this.custormCurrent !== -1 && (this.custormCurrent !== -2)) {
        const current = this.custormList[this.custormCurrent]
        switch (keyCode) {
          case 38:
            if (current.style.pos_y > 0) {
              current.style.pos_y -= 1
            }
            break
          case 39:
            if (current.style.pos_x < this.contentW) {
              current.style.pos_x += 1
            }
            break
          case 40:
            if (current.style.pos_y < this.contentH) {
              current.style.pos_y += 1
            }
            break
          case 37:
            if (current.style.pos_x > 0) {
              current.style.pos_x -= 1
            }
            break
        }
      }
    },
    draggableStop() {
      this.$nextTick(() => {
        const isResizes = Array.from(arguments).length === 5
        if (isResizes) {
          const [x, y, w, h, current] = arguments
          current.style.width = w
          current.style.height = h
          current.style.pos_x = x
          current.style.pos_y = y
        } else {
          const [x, y, current] = arguments
          current.style.pos_x = x
          current.style.pos_y = y
        }
      })
    },
    filterCustorm(_key) {
      let _custormItem = {}
      if (this.custormInitData.length > 0) {
        this.custormInitData.some((custormItem, custormIndex) => {
          const iscustorm = custormItem.key === _key
          if (iscustorm) {
            _custormItem = JSON.parse(JSON.stringify(custormItem))
            return iscustorm
          }
        })
      }
      _custormItem.id = signid('MC')
      console.log('filterCustorm:', _custormItem)
      return _custormItem
    },
    custormEvt(...arg) {
      const [evttype, ...last] = [...arg]
      console.log(evttype)
      this.$nextTick(() => {
        if (evttype === 'current') {
          this.custormCurrent = last[0]
          if (!this.noFiltersLits.includes(last[0])) {
            this.$nextTick(() => {
              this.checkCopy()
            })
          }
          //   console.log(...arg)
        } else if (evttype === 'dragging') {
          this.draggingCurrent = last[0]
        } else if (evttype === 'deleted') {
          this.$alert('确定删除此组件？', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              if (action === 'confirm') {
                const current = this.custormList[last[0]]
                let _redataItem = {}
                const redata = [...this.redata1, ...this.redata2, ...this.redata3, ...this.redata4]
                redata.some((redataItem, redataIndex) => {
                  const isredata = redataItem.key === current.key
                  if (isredata) {
                    _redataItem = redataItem
                    return isredata
                  }
                });
                (_redataItem.nownum >= 1) && (_redataItem.nownum -= 1)
                this.custormList.splice(last[0], 1)
                this.custormCurrent = this.custormList.length >= 1 ? this.custormList.length - 1 : -1
                console.log(this.custormCurrent, '!!!')
                this.checkCopy()
                this.$message({
                  type: 'success',
                  message: `删除成功`
                })
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import "../../components/CustormPoster/style/VueDraggableResizable.css";
$renohome-top: 50px;
$renohome-style: #409eff;
/deep/ .resizable {
  border: 2px dashed rgba(214,214,214,.4);
  > section {
    width: 100%;
    height: 100%;
  }
  &:hover {
    border: 2px dashed $renohome-style;
  }
  &.active {
    border: 2px dashed $renohome-style;
    cursor: move;
    .handle {
      // display: none !important;
      box-sizing: border-box;
      position: absolute;
      width: 10px;
      height: 10px;
      background: $renohome-style;
      //   &.handle-tl {
      //     top: -10px;
      //     left: -10px;
      //     cursor: nw-resize;
      //   }
      //   &.handle-tm {
      //     top: -10px;
      //     left: 50%;
      //     margin-left: -5px;
      //     cursor: n-resize;
      //   }
      //   &.handle-tr {
      //     top: -10px;
      //     right: -10px;
      //     cursor: ne-resize;
      //   }
      //   &.handle-mr {
      //     top: 50%;
      //     margin-top: -5px;
      //     right: -10px;
      //     cursor: e-resize;
      //   }
      //   &.handle-bm {
      //     bottom: -10px;
      //     left: 50%;
      //     margin-left: -5px;
      //     cursor: s-resize;
      //   }
      //   &.handle-bl {
      //     bottom: -10px;
      //     left: -10px;
      //     cursor: sw-resize;
      //   }
      //   &.handle-ml {
      //     top: 50%;
      //     margin-top: -5px;
      //     left: -10px;
      //     cursor: w-resize;
      //   }
    }
  }
  .handle-br {
    display: block !important;
    position: absolute;
    box-sizing: border-box;
    background: #409eff;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    z-index: 1;
    cursor: se-resize;
  }
}
.secation {
  background: #ffffff;
  padding: 0.2rem;
  border: 1px dashed orange;
  margin: 20px 0;
}

.project-type {
  width: 245px;
}

.page-body {
  border: 0;
}

.welcome-container .account-stat {
  margin-bottom: 20px;
}

.section-page.renovationhome-page {
  /deep/ .renohome-phone-btn .el-button {
    font-size: 16px;
    background: #73767d !important;
    padding: 11px 7px;
    border: none;
    color: #fff;
  }

  /deep/ .renohome-content {
    left: 305px !important;
    .wlm-fixed-btn{
      position: fixed;
      bottom: 0;
      left: 304px;
      right: 360px;
    }
  }

  /deep/ .renohome-content .renohome-phone .drag.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // border: 2px dashed $renohome-style;
    cursor: move;
    z-index: 10;
  }

  /deep/ .renohome-content .renohome-phone .drag:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // border: 2px dashed $renohome-style;
    cursor: move;
    z-index: 10;
  }

  /deep/ .renohome-content .renohome-phone .noshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background-color: rgba(0, 0, 0, 0.2);
    background-size: 80px 25px;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 3;
  }

  /deep/ .custorm--modelbox {
    position: relative;
    width: 100%;
    height: 100%;
    >div{
      width: 100%;
      height: 100%;
    }
  }

  /deep/ .custorm--modelbox .btn-edit-del {
    display: none;
    position: absolute;
    height: 16px;
    width: 16px;
    right: -2px;
    top: -2px;
    z-index: 11;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    background: $renohome-style;
    border-radius: 0 0 0 100%;
  }

  /deep/ .renohome-content .renohome-phone .drag:hover .btn-edit-del,
  /deep/ .renohome-content .renohome-phone .drag.active .btn-edit-del {
    display: block;
  }

  /deep/ .btn-edit-del .icon-close {
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    text-align: right;
    line-height: 1;
  }

  /deep/ .btn-edit-del .icon-close::after {
    content: "×";
  }

  /deep/ .es-goods-group:after {
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    content: "";
    clear: both;
  }

  /deep/ .block {
    display: block !important;
  }

  /deep/ .el-submenu__title {
    font-style: normal;
  }

  & .welcome-container .panel-body {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    padding-left: 116px;

    & .table-footer {
      background: #ffffff;
    }
  }

  & /deep/ .el-menu-item.is-active {
    color: #303133;
  }

  & /deep/ .el-form-item__label {
    white-space: nowrap;
  }

  & .renohome-icon {
    height: 20px;
    width: 20px;
  }

  & .el-menu-item:hover {
    background-color: transparent;
  }

  & .el-menu-item:hover::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid $renohome-style;
    position: absolute;
    top: 0;
    left: 0;
  }

  & .el-menu-item:hover p {
    background-color: transparent;
  }

  & .el-menu-item:focus {
    background-color: transparent;
    color: #303133;
  }

  & .renohome-left-text {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    text-align: center;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .renohome-left-num {
    line-height: 15px;
    color: rgb(153, 153, 153);
    font-size: 12px;
  }

  & /deep/ .el-menu-item-group__title {
    display: none;
  }

  /deep/ .el-submenu__title {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 15px;
    background-color: #f3f3f3;

    i {
      color: #333;
      margin-right: 0;
    }

    i > span {
      display: inline-block;
      font-style: normal;
    }
  }

  /deep/ .el-submenu.is-opened:nth-of-type(1) .el-submenu__title {
    border-top: none;
  }

  & /deep/ .el-menu-vertical-demo {
    // border: 1px solid #e6e6e6;
  }

  & .renohome-right {
    width: 360px;
    overflow-y: scroll;
    position: fixed;
    top: $renohome-top;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 4px;
    padding: 0 10px;
  }

  & .renohome-left {
    width: 305px;
    overflow-y: scroll;
    position: fixed;
    top: $renohome-top;
    bottom: 0;
    left: 211px;
    background: #fff;

    /deep/ .el-menu-item-group > ul {
      flex-wrap: wrap;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;

      li {
        width: 33.33%;
        height: auto;
        line-height: auto;
        min-width: auto;
        padding: 15px 0 !important;
        border-bottom: 1px solid #f3f3f3;
        position: relative;
        &:not(:nth-child(3n+0)) {
          border-right: 1px solid #f3f3f3;
        }
      }

      .svg-icon {
        width: 23px;
        height: 26px;
        padding-top: 3px;
        opacity: 0.7;
      }
    }
  }

  & /deep/ .renohome-phone {
    width: 375px;
    background: #fafafa;
    margin: 50px auto 0;
    position: relative;
    box-sizing: border-box;
  }

  & /deep/ .renohome-phone-inner {
    position: relative;
    // border: 1px solid #ddd;
    background: #fff;
    min-height: 600px;
  }

  & /deep/ .renohome-content {
    background: #f2f4f7;
    position: fixed;
    overflow-y: scroll;
    left: 479.5px;
    right: 360px;
    top: $renohome-top;
    bottom: 0;
    padding-bottom: 50px;
  }

  & /deep/ .renohome-phone-btn {
    position: fixed;
    width: 40px;
    height: auto;
    background: #535167;
    left: 49%;
    top: 40%;
    margin-left: 210px;
    border-radius: 20px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
  }

  & /deep/ .renohome-phone-btn .el-button + .el-button {
    margin-left: 0;
  }

  & /deep/ .renohome-phone-btn .el-button {
    background: #535167 !important;
    padding: 11px 7px;
    border: none;
    color: #fff;
    position: relative;
  }

  & /deep/ .renohome-phone-btn .el-button::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 0;
    border-top: 1px solid #626077;
    bottom: 0;
    left: 10px;
  }

  & /deep/ ::-webkit-scrollbar {
    width: 4px;
    background-color: #f5f5f5;
    height: 6px;
  }

  & /deep/ ::-webkit-scrollbar-thumb {
    background-color: #999;
  }

  & /deep/ ::-webkit-scrollbar-track {
    background-color: #f2f4f7;
  }

  & /deep/ .renohome-content::-webkit-scrollbar-track {
    background: #f2f4f7;
  }

  & /deep/ .renohome-right-nav {
    width: 100%;
    position: relative;
    padding: 10px 0;
  }

  & /deep/ .renohome-right-nav-title {
    color: $renohome-style;
    font-size: 15px;
    text-align: left;
    padding-left: 15px;
    position: relative;
    height: 28px;
    line-height: 28px;
  }

  & /deep/ .renohome-right-nav-title::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    bottom: 5px;
    width: 3px;
    background: $renohome-style;
    border-radius: 30%;
  }

  & /deep/ .renohome-right-nav-list {
    height: 28px;
    line-height: 28px;
    background-color: #f2f2f3;
    border-radius: 14px;
    width: 180px;
  }

  & /deep/ .renohome-right-nav-itembox {
    background: rgb(242, 242, 242);
  }

  & /deep/ .renohome-right-nav-item {
    font-size: 14px;
    cursor: pointer;
    width: 90px;
    border-radius: 14px;
    text-align: center;
    height: 28px;
    line-height: 28px;
  }

  & /deep/ .renohome-right-nav-item.active {
    color: #fff;
    background-color: #2589ff;
  }

  & /deep/ .renohome-phone {
    *,
    :after,
    :before {
      box-sizing: border-box;
    }

    .line-hide,
    .two-line-hide {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .two-line-hide {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .line-hide {
      white-space: nowrap;
    }
  }

  & /deep/ .custorm--modelbox {
    .choose-goods {
      width: 100%;
      margin-bottom: 15px;

      .choods-item {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }

    .edit-form-item {
      border-top: 5px solid #ffffff;
      padding: 20px 23px;
      font-size: 12px;
      background: #f8f8fa;
      border-radius: 6px;
    }

    .edit-form-item:last-child {
      border-bottom: 0;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
    }

    .form-label {
      line-height: 1;
      color: #47565d;
      font-weight: bolder;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .form-label.mb-20 {
      margin-bottom: 20px;
    }

    .edit-form-item .inner {
      margin-top: 12px;
      white-space: nowrap;
    }

    .stylebox {
      padding: 10px 20px;
      color: #999;
      white-space: nowrap;
    }

    .ivu-color-picker .ivu-input {
      width: 56px;
      cursor: pointer;
      border-radius: 2px;
    }

    .ivu-input + span {
      box-sizing: border-box;
      line-height: 26px;
      width: 56px;
      height: 26px;
      margin-left: 10px;
      background: #f1f1f1;
      border-color: #dfdfdf;
      cursor: pointer;
      border-radius: 2px;
      border: 1px solid #dfdfdf;
      text-align: center;
    }

    .button-shape {
      margin-right: 20px;
      cursor: pointer;
    }

    .button-shape .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .opacity-0 {
      opacity: 0;
    }

    .button-shape .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .button-shape div.active {
      border-color: $renohome-style;
    }

    .button-shape div {
      width: 32px;
      height: 32px;
      background: #dfdfdf;
      border: 1px solid #dfdfdf;
    }

    .button-shape .button-shape-arc {
      border-radius: 4px;
    }

    .button-shape .button-shape-circle {
      border-radius: 16px;
    }

    .goodscol-add {
      border: 1px solid #6b7685;
      line-height: 32px;
      height: 32px;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
    }

    .el-color-picker--mini .el-color-picker__trigger {
      width: 56px;
    }

    .showcolor {
      width: 70px;
      text-align: center;
      line-height: 26px;
      height: 26px;
      background: #f1f1f1;
      color: #666;
      border-radius: 2px;
      border: 1px solid #dfdfdf;
      display: inline-block;
      margin-left: 10px;
    }

    .es-form-item {
      padding: 20px 23px;
      font-size: 12px;
      background: #f8f8fa;
      border-radius: 6px;

      .uploadSource {
        background: #fff;
        cursor: pointer;
      }

      .uploadSource {
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-right: 0;
        border: 1px dashed #ededed;
        text-align: center;
        color: #dad9d9;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
      }
    }

    .es-form-item:last-child {
      border-bottom: 0;
    }

    .es-form-item .item-inner {
      margin-top: 8px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;

      .color-picker span.ivu-input {
        width: 56px;
        line-height: 26px;
        height: 26px;
        background: #f1f1f1;
        color: #666;
        border-radius: 2px;
        border: 1px solid #dfdfdf;
        padding: 0;
        margin-left: 10px;
        display: inline-block;
      }
    }

    .es-form-item .item-inner:first-of-type {
      margin-top: 0;
    }

    .es-form-item .button-img {
      width: 32px;
      height: 32px;
      margin-right: 20px;
      cursor: pointer;
      border-radius: 4px;
      box-sizing: border-box;
      line-height: 36px;
      text-align: center;
      border: 1px solid transparent;
    }

    .es-form-item .button-img.block {
      width: 100%;
      position: relative;
      min-height: 32px;
      height: auto;
      text-align: left;
    }

    .es-form-item .button-img.active {
      border-color: #fb6638 !important;
    }

    .es-form-item [type="checkbox"],
    [type="radio"] {
      box-sizing: border-box;
      padding: 0;
    }

    .es-form-item .opacity-0 {
      opacity: 0;
    }

    .es-form-item .button-img .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .es-form-item .alignC {
      text-align: center;
    }

    .es-form-item .item {
      background: #f6f7f9;
      padding: 10px 20px 10px 10px;
      border: 1px solid #eee;
      color: #999;
      position: relative;
      margin-bottom: 20px;
    }

    .es-form-item .labeltext {
      width: 40px;
      text-align: right;
      padding-right: 8px;
      white-space: nowrap;
      color: #666;
    }

    .es-form-item .item-inner .readonly-div {
      position: relative;
      flex-grow: 1;
    }

    .es-form-item .ivu-input-wrapper {
      display: inline-block;
      width: 100%;
      position: relative;
      vertical-align: middle;
      line-height: normal;
    }

    .es-form-item .ivu-input {
      display: inline-block;
      width: 100%;
      height: 32px;
      line-height: 1.5;
      padding: 4px 12px;
      font-size: 12px;
      border: 1px solid #ededed;
      border-radius: 4px;
      color: #333;
      background-color: #fff;
      background-image: none;
      position: relative;
      cursor: text;
      -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
        -webkit-box-shadow 0.2s ease-in-out;
      transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    }

    .es-form-item .item-inner .readonly-div .readonly input {
      background: #e8effc;
      border: 0;
      padding-left: 18px;
      cursor: pointer;
      box-sizing: border-box;
    }

    .es-form-item .item-inner .readonly-div .readonly-icon {
      position: absolute;
      top: 5px;
      left: 12px;
    }

    .es-form-item .item .delete-child {
      position: absolute;
      right: -9px;
      top: -9px;
      cursor: pointer;
      font-size: 18px;
    }

    .coupon-showslider {
      width: 56px;
      height: 26px;
      background: #f6f7f9;
      border-color: #f1f1f1;
      color: #666;
      border-radius: 2px;
      line-height: 26px;
      text-align: center;
      margin-left: 20px;
    }

    .ivu-alert {
      position: relative;
      padding: 8px 16px;
      border-radius: 6px;
      color: #666;
      font-size: 12px;
      line-height: 22px;
      margin-bottom: 20px;
      border: 1px solid #d8e8fc;
      background-color: #e5f0fe;
    }

    .my-link-input .el-input__inner {
      border: none;
      height: 32px;
      background: #e8effc;
      cursor: pointer;
      border-radius: 5px;
    }

    .choose-item-lits {
      padding-top: 10px;
      flex-wrap: wrap;

      .choose-item-child {
        margin: 0 9px 10px 0;
        border-radius: 4px;
        border: 1px solid #ededed;
        width: 50px;
        height: 50px;
        line-height: 50px;
        position: relative;
        cursor: pointer;

        img.small {
          width: 48px;
          max-height: 100%;
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }

        .delete {
          position: absolute;
          top: -6px;
          right: -6px;
          display: none;
          cursor: pointer;
        }

        &:hover {
          .delete {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
